<template>
  <div style="height: 100%;position: relative;">
    <div class="title">近三月质量问题等级趋势图</div>
    <el-row style="margin-top: 10px;">
      <el-col :span="5" :offset="18">
        <el-select size="mini" clearable v-model="projectId" placeholder="选择项目:全部" @change="getData">
          <el-option v-for="(item, index) in projectNameOptions" :label="item.label" :value="item.value"
            :key="index"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div id="main1" style="width: 100%; height:calc(100% - 80px)"></div>
    <img src="@/assets/images/noData.png" class="nodataImg" v-if="!list.length" />
  </div>
</template>
<script>
import { listDept } from "@/api/navbar";
import { mapState } from "vuex";
import { getSecurityCheckTrend } from "./api"
import * as echarts from "echarts";
export default {
  data() {
    return {
      projectNameOptions: [],
      projectId:this.$store.state.app.selectData,
      list: [],
      chart: null,
      timeData: [],
    };
  },
  mounted() {
    this.getProjectNameOptions();
    this.initChart();
    this.getData();
  },
  methods: {
    async getProjectNameOptions() {
      this.projectNameOptions = [];
      const res = await listDept();
      const buffer = res.data.sort(function (a, b) {
        return b.id - a.id;
      });
      this.projectNameOptions = buffer.map((item) => {
        return { value: item.id, label: item.name };
      })
    },
    async getData() {
      const res = await getSecurityCheckTrend({
        projectId: this.projectId
      })
      this.list = res.map;
      let timeArr = []
      let arr = []
      this.list.forEach(item=>{
        if (timeArr.indexOf(item.mouth) =='-1') {
          timeArr.push(item.mouth)
          item.counts1 = '0'
          item.counts2 = '0'
          if (item.questionLevel == '2') {
          item.counts1 = item.counts
          }else if (item.questionLevel == '3'){
          item.counts2 = item.counts
          }
          arr.push(item)
        }else{
          if (item.questionLevel == '2') {
            arr[timeArr.indexOf(item.mouth)].counts1 = item.counts
          }else if (item.questionLevel == '3'){
            arr[timeArr.indexOf(item.mouth)].counts2 = item.counts
          }
        }
      })
      this.list = arr
      this.setOption()
    },
    initChart() {
      const chartDom = document.getElementById("main1");
      this.chart = echarts.init(chartDom);
    },
    setOption() {
      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["一般质量问题", "较大质量问题","重大质量问题"],
          top: '5%',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: ["2023-05-01", "2023-05-03", "2023-05-05", "2023-05-07", "2023-05-09", "2023-05-11"],
          data: this.list.map((item) => item.mouth),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "一般质量问题",
            type: "line",
            stack: "Total1",
            // data: [120, 132, 101, 134, 90, 230],
            data: this.list.map((item) => item.counts),
          },
          {
            name: "较大质量问题",
            type: "line",
            stack: "Total2",
            // data: [220, 182, 191, 234, 290, 330],
            data: this.list.map((item) => item.counts1),
          },
          {
            name: "重大质量问题",
            type: "line",
            stack: "Total3",
            // data: [220, 182, 191, 234, 290, 330],
            data: this.list.map((item) => item.counts2),
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  watch: {
    app: {
      handler(newVal, oldVal) {
        this.projectId = newVal.selectData;
        this.getData();
      },
      deep: true,
    },
  },
  computed: {
    ...mapState(["app"]),
  },
};
</script>
<style scoped  lang="scss">
.title {
  padding: 5px;
}
.nodataImg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 30%;
  left: 40%;
}

::v-deep .el-input__inner {
  background-color: transparent !important;
}

/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 160px;

  .el-input {
    input {
      border-color: rgba(117, 122, 130);
      color: rgb(117, 122, 130);
    }
  }
}
</style>
